<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/site.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/element.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/login.css}">

</head>
<body>
    <div id="left" >
        <div id="wrapper" style=" height: 550px;width: 760px;background-image: url('/imgs/login3.png');position: absolute;left: 50px;top: 50px"></div>
        <div id="login" style="margin: 100px auto ;background-color: #fff;width: 350px;height: 300px;padding:20px;border-radius: 10px;background-color:rgba(255,255,255,0.35);position: fixed;right: 100px">
            <el-card shadow="hover" style="width: 400px;height: 460px">
                <form class="form" method="post" th:action="@{/user/toReg}">
                    <h2><a  href="login.html" th:href="@{/user/toLogin}">登录</a>
                        <a class="active" href="reg.html" th:href="@{/user/toReg}">注册</a></h2>
                    <input type="text" name="username" placeholder="邮箱/手机号码/小米ID"/>
                    <input type="password" name="password" placeholder="密码"/>
                    <input type="password" name="repassword" placeholder="确认密码"/>
                    <div class="error" th:text="${error}" style="color: red"></div>
                    <input type="submit" value="注册" />
                    <div class="link clear">
                        <a href="" class="left">忘记密码?</a>
                        <a href="" class="right">手机号登录</a>
                    </div>
                </form>
            </el-card>
        </div>
    </div>



</body>
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/element.js}"></script>

    <script>
        new Vue({
            el:'#login',
            data: function (){
                var checkAge = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('年龄不能为空'));
                    }
                    setTimeout(() => {
                        if (!Number.isInteger(value)) {
                            callback(new Error('请输入数字值'));
                        } else {
                            if (value < 18) {
                                callback(new Error('必须年满18岁'));
                            } else {
                                callback();
                            }
                        }
                    }, 1000);
                };
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        callback();
                    }
                };
                var validateusername = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入账号'));
                    }else {
                        callback();
                    }
                };
                return {
                    ruleForm:{},
                    rules: {
                        password: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        username: [
                            { validator: validateusername, trigger: 'blur' }
                        ],
                        age: [
                            { validator: checkAge, trigger: 'blur' }
                        ]
                    }
                }
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        console.log(typeof JSON.stringify(this.ruleForm))
                        if (valid) {
                            $.ajax({
                                url: '/user/login',
                                data: JSON.stringify(this.ruleForm),
                                type: 'post',
                                dataType:'json',
                                contentType:'application/json',
                                success: function (data){
                                    console.log(data)
                                },
                                error: function (){
                                }
                            })
                        } else {
                            this.$message.error('格式有误');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },

            }
        })
    </script>
</html>